<template>
    <div>
        <div ref="main" style="width: 400px; height: 250px;"></div>
    </div>
</template>

<script>
export default {
    methods: {
        darwbar() {
            let myChat = this.$echarts.init(this.$refs.main)
            let option = {

                tooltip: {
                    trigger: 'item',
                    formatter:'{b}:{d}%',
                },
                legend: {
                    bottom: '0px',
                    icon: 'circle',
                    itemHeight: 8,
                    itemGap: 12,
                    textStyle: {
                        fontSize: 12,
                        color: "#333",
                        padding: [0, 0, 0, -8], // 修改文字和图标距离
                    },
                },
                grid: {
                    top: 'top'
                },
                series: [
                    {
                        radius: '40%',
                        type: 'pie',

                        data: [
                            { value: 1048, name: '自建应用' },
                            { value: 735, name: '统一建设应用' },
                            { value: 580, name: '统一建设分级部署' },
                            { value: 484, name: '统筹规划分级建设' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                label: {
                    narmal: {
                        formatter: '{b}:{c}: ({d}%)'
                    }
                }
            }
            myChat.setOption(option)
        }
    },
    mounted() {
        this.darwbar()
    }
}
</script>

<style lang="scss" scoped></style>